<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { todoItem } from '@/types/data'
import useStore from '@/store';
const { main } = useStore();
const { delTodos, updateTodos } = main;
const props = defineProps<{
	item: todoItem,
	user_id: number,
}>();
const isEditing = ref(false);
const inputRef = ref<HTMLInputElement>();
const currentName = ref('');
const handleDblClick = async () => {
	isEditing.value = true;
	currentName.value = props.item.name;
	await nextTick(() => inputRef.value?.focus());
}
const handleBlur = () => {
	isEditing.value = false;
}
const handleKeyup = (e: KeyboardEvent) => {
	if (e.key === 'Escape') {
		currentName.value = '';
		handleBlur();
	}
	else if (e.key === 'Enter') {
		updateTodos(props.user_id, props.item.id, 'item_content', currentName.value);
		handleBlur();
	}
}
</script>
<template>
	<li :class="{ completed: item.done, editing: isEditing }">
		<div class="view">
			<input @click="updateTodos(props.user_id, item.id, 'done', !item.done)" class="toggle" type="checkbox"
				:checked="item.done" />
			<label @dblclick="handleDblClick">{{ item.name }}</label>
			<button @click="delTodos(props.user_id, item.id)" class="destroy"></button>
		</div>
		<input @keyup="handleKeyup" @blur="handleBlur" class="edit" v-model="currentName" ref="inputRef" />
	</li>
</template>

<style lang="scss" scoped>
.edit {
	position: relative;
	margin: 0;
	width: 100%;
	font-size: 24px;
	font-family: inherit;
	font-weight: inherit;
	line-height: 1.4em;
	color: inherit;
	padding: 6px;
	border: 1px solid #999;
	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.toggle:focus+label {
	box-shadow: 0 0 2px 2px #CF7D7D;
	outline: 0;
}


li {
	position: relative;
	font-size: 24px;
	border-bottom: 1px solid #ededed;
}

li:last-child {
	border-bottom: none;
}

li.editing {
	border-bottom: none;
	padding: 0;
}

li.editing .edit {
	display: block;
	width: calc(100% - 43px);
	padding: 12px 16px;
	margin: 0 0 0 43px;
}

li.editing .view {
	display: none;
}

li .toggle {
	text-align: center;
	width: 40px;
	/* auto, since non-WebKit browsers doesn't support input styling */
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	border: none;
	/* Mobile Safari */
	-webkit-appearance: none;
	appearance: none;
}

li .toggle {
	opacity: 0;
}

li .toggle+label {
	/*
		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: center left;
}

li .toggle:checked+label {
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
}

li label {
	word-break: break-all;
	padding: 15px 15px 15px 60px;
	display: block;
	line-height: 1.2;
	transition: color 0.4s;
	font-weight: 400;
	color: #484848;
}

li.completed label {
	color: #949494;
	text-decoration: line-through;
}

li .destroy {
	display: none;
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	width: 40px;
	height: 40px;
	margin: auto 0;
	font-size: 30px;
	color: #949494;
	transition: color 0.2s ease-out;
}

li .destroy:hover,
li .destroy:focus {
	color: #C18585;
}

li .destroy:after {
	content: '×';
	display: block;
	height: 100%;
	line-height: 1.1;
}

li:hover .destroy {
	display: block;
}

li .edit {
	display: none;
}

li.editing:last-child {
	margin-bottom: -1px;
}
</style>